import React from 'react';
import { Tabs } from 'antd';
import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types';

import './PanelTabs.styl';

const { TabPane } = Tabs;

const PanelTabs = function(props) {
  const { panels, studies, position, t } = props;

  const panelComps = [];

  panels.forEach(p => {
    const Pane = p.component;
    panelComps.push(
      <TabPane tab={t(p.label)} key={p.id}>
        <Pane studies={studies} position={position} />
      </TabPane>
    );
  });

  const tabBarStyle = { margin: 0 };
  if (panelComps.length < 2) {
    tabBarStyle.display = 'none';
  };

  return (
    <Tabs className="side-panel" keyboard="true" tabBarStyle={tabBarStyle}>
      {panelComps}
    </Tabs>
  );
}

PanelTabs.propsTypes = {
  panels: PropTypes.array,
  stduies: PropTypes.object,
  position: PropTypes.string.isRequired,
  t: PropTypes.func.isRequired,
}

export default withTranslation("Panels")(PanelTabs);
